<template>
	<view class="content" :style="[pageStyle]">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="not-diy" v-if="notDiy">
			<u-empty :icon="uEmpty.page" text="模版未找到">
			</u-empty>
		</view>
		<view v-else :style="{backgroundImage:'url('+image+')',backgroundRepeat:repeat,backgroundSize:size}">
			<wlk-topNav v-if="list.content && list.content[0].type=='topNav'" :item="list.content[0]"
				:scrollTop="scrollTop" :systemInfo="systemInfo"></wlk-topNav>
			<view :style="[intoStyle]">
				<block v-for="(item,index) in list.content" :key="index">
					<wlk-image v-if="item.type=='image'" :item="item" :systemInfo="systemInfo"></wlk-image>
					<wlk-notice v-if="item.type=='notice'" :item="item"></wlk-notice>
					<wlk-search v-if="item.type=='search'" :item="item" :scrollTop="scrollTop"
						:borderHeight="borderHeight"></wlk-search>
					<wlk-text v-if="item.type=='text'" :item="item"></wlk-text>
					<wlk-blank v-if="item.type=='blank'" :item="item"></wlk-blank>
					<wlk-border v-if="item.type=='border'" :item="item"></wlk-border>
					<wlk-nav v-if="item.type=='nav'" :item="item" :systemInfo="systemInfo"></wlk-nav>
					<wlk-magic v-if="item.type=='magic'" :item="item" :systemInfo="systemInfo"></wlk-magic>
					<wlk-line @doneWaterFall="setWaterFallHeight" v-if="item.type=='line'" :item="item"
						:borderHeight="borderHeight"></wlk-line>
					<wlk-end @doneWaterFall="setWaterFallHeight" v-if="item.type=='end'" :item="item"
						:scrollTop="scrollTop" :systemInfo="systemInfo" :borderHeight="borderHeight"></wlk-end>
					<wlk-tag @doneWaterFall="setWaterFallHeight" v-if="item.type=='tag'" :item="item"
						:scrollTop="scrollTop" :systemInfo="systemInfo" :borderHeight="borderHeight"></wlk-tag>
					<wlk-note @doneWaterFall="setWaterFallHeight" v-if="item.type=='note'" :item="item"
						:borderHeight="borderHeight"></wlk-note>
				</block>
			</view>
		</view>
		<u-back-top :scroll-top="scrollTop" top="600" icon="arrow-up" :customStyle="{
            backgroundColor:themeColor
        }" :iconStyle="iconStyle"></u-back-top>
		<wlk-tabbar></wlk-tabbar>

		<!-- 弹窗提示-->
		<u-popup :show="authShow" mode="center" :safeAreaInsetBottom="false" @close="authShow=false" round="20"
			closeable>
			<view class="token pd30">
				<view class="center title bold">官方提示</view>
				<image :src="images.token" mode="widthFix"></image>
				<view class="center desc col9 mb20">禁止分享、复制、转售和传播</view>
				<view class="center desc col9 mb20">认准官方软件购买网址</view>
				<u-button :customStyle="{
			            margin:'0',
			            width:'100%',
			            fontSize:'14rpx',
			            height:'90rpx'
                         }" :color="themeColor" @click="copyLink" shape="circle" text="复制网址"></u-button>
				<view class="center desc col9 auth">©版权归属</view>
				<view class="center desc col9 ">温州微凌客科技有限公司</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	var _self;
	import { copy } from '@/wlkutils/tools';
	import share from "@/wlkutils/share";
	import { mapGetters,mapMutations } from 'vuex';
	export default {
		components: {},
		data() {
			return {
				list: {},
				image: '',
				repeat:'no-repeat',
				size:"contain",
				scrollTop: 0,
				pageStyle: {
					backgroundColor: ''
				},
				intoStyle: {
					paddingTop: ''
				},
				systemInfo: uni.getSystemInfoSync(),
				notDiy: false,
				borderHeight: 0,
				iconStyle: {
					color: '#FFFFFF'
				},
				authShow: false,
			}
		},
		computed: {
			...mapGetters(['themeColor', 'uEmpty', 'images']),
		},
		onLoad() {
			_self = this;
			_self.getData();
		},
		onShow() {
			uni.hideTabBar();
			if (this.scrollTop > 0) {
				uni.pageScrollTo({
					scrollTop: this.scrollTop,
				})
			}
		},
		onShareAppMessage(res) {
			return share.setShareInfo();
		},
		onPageScroll(e) {
			_self.scrollTop = e.scrollTop;
		},
		methods: {
			getData() {
				uni.$u.http.post('diy/getDiyPage', {
					windowWidth: _self.systemInfo.windowWidth,
					type: 'home'
				}).then(res => {
					// console.log(res.data)
					if (res.data) {
						_self.list = res.data;
						_self.image = res.data.content[0].data.image[2].url
						// _self.pageStyle.backgroundColor = _self.list.content[0].style.bgColor;
						this.notDiy = false;
					} else {
						this.notDiy = true;
					}
				}).catch(res => {

				})
			},
			setWaterFallHeight(height) {
				this.borderHeight = height;
			},
			copyLink() {
				copy('https://www.fastadmin.net/store/wlktour.html');
			}
		}
	}
</script>

<style lang='scss'>
	page {
		width: 100%;
		height: auto;

		.content {
			width: 100%;
			height: 100%;

			.not-diy {
				margin-top: 30%;
			}
		}

		.token {
			.title {
				font-size: $font-lg;
			}

			.desc {
				font-size: $font-base;
			}

			.auth {
				margin-top: 80rpx;
			}

			/*width: 100%;*/
			/*background-color: white;*/
			/*image{*/
			/*    width: 400rpx;*/
			/*    margin: 0 auto;*/
			/*}*/
		}
	}
</style>